<template>
  <div ref="outline" class="outline" />
</template>

<script lang="ts" setup>
import VditorPreview from 'vditor/dist/method.min'
const outline = ref();
const titles = ref([]);
const { proxy } = getCurrentInstance()
//风格
import {theme} from 'ant-design-vue';
const {useToken} = theme;
const {token} = useToken();
const initOutLine = (data) => {
 // console.log("初始化大纲......")
 // console.log(data)
  nextTick(() => {
    VditorPreview.outlineRender(data,outline.value)
    const el = outline.value.querySelectorAll('[data-target-id]');
    //  console.log(this.titles)
    titles.value = el;
  })
 }
const heightLight = (data) =>{
  if(titles.value == null||titles.value.length == 0)
    return;
  titles.value.forEach(element => {
    const dataTargetId = element.getAttribute('data-target-id');
    //高亮目标
    if (dataTargetId === data) {
      element.style.color = token.value.colorPrimary
      // element.classList.add('active');

      // 获取父元素的父元素(u标签)
      if(element.parentNode && element.parentNode.parentNode){
        const parentElement = element.parentNode.parentNode;
        if (parentElement.tagName.toLowerCase() === 'ul') {
          // 元素是 <ul> 标签
          const computedStyle = window.getComputedStyle(parentElement);
          // 获取 display 属性的值
          const displayValue = computedStyle.getPropertyValue('display');
          if (displayValue === 'none') {
            parentElement.style.display = 'block';
            //兄弟节点
            const eSibling = parentElement.previousSibling
            if(eSibling && eSibling.tagName.toLowerCase() === 'span'){
              const eChildren = eSibling.children
              //

              if(eChildren && eChildren[0].tagName.toLowerCase() === 'svg'){
                if (eChildren[0].classList.contains("vditor-outline__action--close"))
                  eChildren[0].classList.remove('vditor-outline__action--close');
              }
              // console.log(eChildren[0])
            }
          }
        }
      }
    }
    else{
      element.style.color = ""
      //
      // if (element.classList.contains("active"))
      //   element.classList.remove('active');
    }
  });
}
onMounted(() => {
  proxy.$emitter.on('initOutline',initOutLine)
  proxy.$emitter.on('onActiveTitle',heightLight)
})

onUnmounted(() => {
  proxy.$emitter.off('initOutline',initOutLine)
  proxy.$emitter.off('onActiveTitle',heightLight)
})
</script>

<style lang="scss" scoped>
.vditor-outline{
  display: block !important;
  width: 100% !important;
  left: 0px !important;
}
.li{
  span{
    &:hover{
      background-color: #7e8c8d !important;
    }
  }
}
.active{
  background-color: #7e8c8d !important;
}
</style>

